<!DOCTYPE html>
<html>
<head>
    <title>Fresnel Biprism Diagram</title>
</head>
<body>
    <canvas id="canvas" width="400" height="420"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Fill background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Style setup ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        // Use round joins and caps for a slightly softer, hand-drawn look
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        // --- Define prism coordinates ---
        // These points define an isosceles triangle with a vertical base on the left
        const p1 = { x: 140, y: 100 }; // Top-left vertex
        const p2 = { x: 140, y: 300 }; // Bottom-left vertex
        const p3 = { x: 280, y: 200 }; // Right apex

        // --- Draw the prism outline ---
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.lineTo(p3.x, p3.y);
        ctx.closePath(); // This connects p3 back to p1
        ctx.stroke();

        // --- Draw angle labels 'α' (alpha) and their arcs ---
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const angleArcRadius = 28;
        const angleLineWidth = 2; // Arcs are usually thinner than main lines

        // Top angle 'α'
        ctx.lineWidth = angleLineWidth;
        ctx.beginPath();
        // The angle is between the line going down (PI/2) and the slanted line
        const topAngleStart = Math.atan2(p3.y - p1.y, p3.x - p1.x);
        const topAngleEnd = Math.PI / 2;
        ctx.arc(p1.x, p1.y, angleArcRadius, topAngleStart, topAngleEnd);
        ctx.stroke();
        ctx.fillText('α', p1.x + 22, p1.y + 30);

        // Bottom angle 'α'
        ctx.beginPath();
        // The angle is between the line going up (-PI/2) and the slanted line
        const bottomAngleStart = -Math.PI / 2;
        const bottomAngleEnd = Math.atan2(p3.y - p2.y, p3.x - p2.x);
        ctx.arc(p2.x, p2.y, angleArcRadius, bottomAngleStart, bottomAngleEnd);
        ctx.stroke();
        ctx.fillText('α', p2.x + 22, p2.y - 30);
        
        // Reset line width for any future drawing if needed
        ctx.lineWidth = 3;

        // --- Draw refractive index label 'n' ---
        ctx.font = 'italic 24px Times New Roman';
        // Position 'n' near the center of the triangle
        const centerX = (p1.x + p2.x + p3.x) / 3;
        const centerY = (p1.y + p2.y + p3.y) / 3;
        ctx.fillText('n', centerX + 15, centerY); // Adjust position for visual balance

        // --- Draw the figure caption ---
        ctx.font = 'bold 22px "Courier New", monospace';
        ctx.fillText('Fig. 2.10', canvas.width / 2, 370);

    </script>
</body>
</html>